
<!--
npm install @wangeditor/editor --save --legacy-peer-deps
npm install @wangeditor/editor-for-vue --save --legacy-peer-deps
-->
<template>
  <div style="border: 1px solid #ccc;">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :default-config="toolbarConfig"
      :mode="mode"
    />
    <Editor
      v-model="inputValue"
      style="min-height: 200px;overflow-y: hidden;"
      :default-config="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
    />
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { uploadFile } from '@/api/upload'
import { getToken } from '@/utils/auth'
import '@wangeditor/editor/dist/css/style.css'

const timestamp = Date.parse(new Date())
  .toString()
  .substring(0, 10)
export default {
  name: 'WangEditor',
  components: { Editor, Toolbar },
  model: {
    prop: 'value',
    event: 'update'
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      editor: null,
      toolbarConfig: {
        excludeKeys: ['group-video', 'insertImage', 'redo', 'undo', 'fontFamily']
      },
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          uploadImage: {
            server: window.global.baseURL + '/lv/uploadFile',
            fieldName: 'file', // 上传文件名
            // 单个文件的最大体积限制，默认为 2M
            maxFileSize: 10240 * 1024 * 1024, // 1M
            // 最多可上传几个文件，默认为 100
            // maxNumberOfFiles: 10,
            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['image/*'],
            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,
            // 自定义增加 http  header
            headers: {
              'X-Token': getToken(),
              'Device-Type': window.localStorage.getItem('Device-Type'),
              'timestamp': timestamp
            },
            // 跨域是否传递 cookie ，默认为 false
            withCredentials: false,
            // 超时时间，默认为 10 秒
            timeout: 600 * 1000, // 5 秒
            customInsert: (res, insertFn) => {
              insertFn(res.data.url)
            },
            // 自定义上传
            async customUpload(file, insertFn) {
              // file 即选中的文件
              // 自己实现上传，并得到图片 url alt href
              var form = new FormData()
              form.append('file', file)
              uploadFile(form).then((res) => {
                // console.log(response);
                // 最后插入图片
                let url = res.data.url
                if (!String(res.data.url).includes('http')) {
                  url = window.global.baseURL + '/' + res.data.url
                }
                insertFn(url, '', url)
              })
            }
          }
        }
      },
      mode: 'defaults'
    }
  },
  computed: {
    inputValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('update', val) // 触发
      }
    }
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    }
  }
}
</script>
